<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>汉字转拼音</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        input[type="text"] {
            height: 25px;
            width:98%;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #000;
            background-color: #fff;
            background-image: none;
            border: 1px solid #666;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        input[type="button"]{
            width:100px;
        }
    </style>
</head>
<body>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/hanziDict.js"></script>
    <script src="../libs/pinyin_dict_all.js"></script>
    <script src="../libs/moonJs.js"></script>
    <input id="input" type="text"  placeholder="把汉字粘贴到此地，点确定可转拼音，点拼音和汉字可发声，如果是多音字，点音标可更换音标，最多可转换1000个汉字">
    <input type="button"  value="确定" onclick="clickHandler()">
    <input type="button"  value="拼音10号字体" onclick="changeFontSize(10)">
    <input type="button"  value="拼音12号字体" onclick="changeFontSize(12)">
    <input type="button"  value="拼音14号字体" onclick="changeFontSize(14)">
    <input type="button"  value="拼音16号字体" onclick="changeFontSize(16)">
    <input type="button"  value="保存当前设置" onclick="saveSet()">
    <!-- <input type="button"  value="汉字16号字体" onclick="changeFontSize2(16)">
    <input type="button"  value="汉字18号字体" onclick="changeFontSize2(18)"> -->
    <input type="button"  value="缩小字间距" onclick="changeFontGap(35)">
    <input type="button"  value="放大字间距" onclick="changeFontGap(50)">
    <select id="selectFontSize" onchange="onChangeFontSize()"></select>
    <select id="selectTheme" onchange="onChangeTheme()"></select>
    <input id="showSelect" value="">
    <script>
        //使用JS在线的拼音输入法
        //https://demo.haoji.me/pinyinjs/simple-input-method.html
        let url='https://ywx620.gitee.io/learn/rec/sound/hanzi/$num.mp3';
        var sound=null;
        var input=document.getElementById('input');
        var showSelect=document.getElementById('showSelect');
        var selectTheme=document.getElementById('selectTheme');
        var selectFontSize=document.getElementById('selectFontSize');
        var xGap=35;
        var font1=12;
        var font2=16;
        var txtColor='#000000';
        var canColor='#ffffff';
        updateSet();
        var [cx,cy,y,xNum]=[40,20,20,parseInt(window.innerWidth/xGap)-2];
        var moonjs = new MoonJs();
        var canvas=moonjs.createCanvas({c:'#fff',w:window.innerWidth-10,h:window.innerHeight-80});
        canvas.style.backgroundColor=canColor;
        document.body.style.backgroundColor=canColor;
        moonjs.init(canvas);
        moonjs.start();
        moonjs.setGapXY(0,-60);
        function clickHandler(){
            moonjs.removeAll();
            var content=input.value;
            var num=content.length;
            num=num>1000?1000:num;
            for(var i=0;i<num;i++){
                let hz=content.charAt(i);
                let py=pinyin_dict_all[hz]||' ';
                let pys=py.split(',');
                if(pys.length>1) py=pys[0];
                let x=cx+parseInt(i%xNum)*xGap;
                y=cy+parseInt(i/xNum)*50;
                let y1=y+20+parseInt(font2)-18;
                let t1=moonjs.createDisplay('font').setColor(txtColor).setWH(30,10).setFont(`${font1}px 微软雅黑`).setXY(x, y).setText(py);
                let t2=moonjs.createDisplay('font').setColor(txtColor).setWH(20,20).setFont(`${font2}px 微软雅黑`).setXY(x, y1).setText(hz);
                t1.name=t2.name=py;
                if(pys.length>1){
                    t1.childs=pys;
                    t1.t2=t2;
                }
                moonjs.click(t1,onClick)
                moonjs.click(t2,onClick)
            }
            if(y>window.innerHeight-80){
                canvas.height=y+80;
            }
        }
        function onClick(t){
            //console.log(t.name,t.text)
            showSelect.value=t.text;
            let name=t.name;
            if(name==' ')return;
            //t.setColor('#f00');
            if(t.childs.length>1){
                let n=t.childs.indexOf(t.name);
                n++;
                if(n==t.childs.length)n=0;
                let name=t.childs[n]
                t.setText(name);
                t.t2.name=name;
                t.name=name;
            }
            if(t.t2) name=t.t2.name;
            let u=url.replace('$num',name);
            if(sound){
                sound.setUrl(u);
            }else{
                sound=moonjs.createSound(u);
            }
        }
        function changeFontSize(e){
            font1=e;
            clickHandler();
        }
        function changeFontSize2(e){
            font2=e;
            clickHandler();
        }
        function changeFontGap(e){
            xGap=e;
            xNum=parseInt(window.innerWidth/xGap)-1;
            clickHandler();
        }
        function showLog(){
            let n=0;
            for(let k in hanziDict) n++;
            console.log(n)
        }
        
        var colors=ColorManager.themeColors();
        function onChangeTheme(e){
            let index=selectTheme.options.selectedIndex;
            //console.log(index);
            //let op=selectTheme.options[index]
            //console.log(op.value);
            canColor=colors[index][0];
            canvas.style.backgroundColor=canColor;
            document.body.style.backgroundColor=canColor;
            txtColor=colors[index][1];
            clickHandler();
        }
        function onChangeFontSize(e){
            let index=selectFontSize.options.selectedIndex;
            let op=selectFontSize.options[index];
            font2=op.value;
            clickHandler();
        }
        function saveSet(){
            var data={xGap:xGap,font1:font1,font2:font2,txtColor:txtColor,canColor:canColor}
            Unify.setLocalData('hzToPy',JSON.stringify(data));
            Unify.Alert('保存成功');
        }
        function updateSet(){
            var data=Unify.getLocalData('hzToPy');
            if(data){
                data=JSON.parse(data);
                xGap=data.xGap;
                font1=data.font1;
                font2=data.font2;
                txtColor=data.txtColor;
                canColor=data.canColor;
            }
        }
        function createHtml(){
            for(let i=0;i<4;i++){
                let op=document.createElement('option');
                op.value=16+i*2;
                op.innerText=op.value+'号字体';
                selectFontSize.appendChild(op);
            }
            for(let i=1;i<=colors.length;i++){
                let op=document.createElement('option');
                op.value=i;
                op.innerText='主题'+i;
                selectTheme.appendChild(op);
            }
        }
        createHtml();
    </script>
</body>

</html>